<style lang="less" scoped>

  .register_3 {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;

    .content {
      position: absolute;
      top: 304px;

      .user-info-bg {
        width: 600px;
        height: 96px;
        border-radius: 16px;
        background: rgba(241, 241, 241, 1);
        left: 74px;
        padding-left: 40px;
      }
      .user-info {
        .user-info-bg;
      }

      .form-input {
        width: 462px;
        height: 96px;
        line-height: 96px;
        border-radius: 16px;
        background-color: rgba(241, 241, 241, 1);
        font-size: 28px;
        border: none;
        padding-left: 56px;
      }

      .marginBottom60 {
        margin-bottom: 60px;
      }
      .user-info-pwd-message {
        .user-info-bg;
        .form-input {
          width: 428px;
        }
        .get-validate-code {
          width: 74px;
          height: 44px;
          line-height: 44px;
          border-radius: 4px;
          background-color: rgba(81, 104, 255, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 22px;
          margin: 0;
          padding: 0;
          text-align: center;
          vertical-align: text-bottom !important;
        }
      }

      input::-webkit-input-placeholder {
        color: #aab2bd;
      }

      .login-btn, .submit-btn, .enter-btn {
        margin-top: 64px;
        width: 600px;
        height: 96px;
        border-radius: 16px;
        background-color: #536DFE;
        box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
        line-height: 66px;
        color: rgba(255, 255, 255, 1);
        font-size: 36px;
      }
      .submit-btn {
        margin-top: 88px;
      }

      .enter-btn {
        margin-top: 120px;
      }

      .login-link {
        margin-top: 64px;
        height: 44px;
        line-height: 44px;
        color: rgba(83, 109, 254, 1);
        font-size: 32px;
        text-align: justify;
        display: flex;
        justify-content: center;
        width: 100%;
      }
    }
  }

  .phone-desc {
    margin-top: 8px;
    font-size: 18px;
    margin-left: 40px;
    color: rgba(61, 60, 60, 1);
    margin-bottom: 21px;
  }

  .loading-bar54 {
    margin-bottom: 54px !important;
  }

  .loading-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    margin-bottom: 106px;
    img {
      width: 50px;
      height: 50px;
    }

    .ing-bar {
      width: 100px;
      height: 3px;
      background: rgba(216, 216, 216, 1);
      border-radius: 3px;
      .color-bar {
        width: 70px;
        height: 3px;
        background: rgba(83, 109, 254, 1);
        border-radius: 3px 0px 0px 3px;
      }
    }

    .loaded-bar {
      width: 100px;
      height: 3px;
      background: rgba(216, 216, 216, 1);
      border-radius: 3px;
    }
    .ed-bar {
      width: 100px;
      height: 3px;
      background: rgba(83, 109, 254, 1);
      border-radius: 3px;
    }
  }

  .success {
    width: 600px;
    img {
      width: 60px;
      height: 60px;
    }
    span {
      font-size: 36px;
      color: rgba(90, 90, 90, 1);
      margin-left: 20px;
    }
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .success-content {
    margin-top: 44px;
    div {
      display: flex;
      margin-bottom: 48px;
      .text {
        font-size: 28px;
        color: rgba(181, 180, 180, 1);
      }
      .val {
        margin-left: 48px;
        font-size: 28px;
        color: rgba(90, 90, 90, 1);
      }
    }
    .mleft104 {
      margin-left: 104px !important;
    }
    .marginBottom0 {
      margin-bottom: 0px;
    }
  }

.page-container{
    height: 100%;
    overflow: hidden;
    background: url("../../assets/register-bg.png") no-repeat top center;
    background-size: 100% 276px;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
</style>

<template>
  <div class="page-container">
    <div
      class="register_3"
    >
      <div class="content">
        <div
          :class="[showIndex=='3'?'loading-bar54':'']"
          class="loading-bar"
        >
          <div>
            <img src="../../assets/1.png">
          </div>
          <div>
            <div
              v-show="showIndex=='1'"
              class="ing-bar"
            >
              <div class="color-bar" />
            </div>
            <div
              v-show="showIndex!='1'"
              class="ed-bar"
            />
          </div>
          <div>
            <img
              v-show="showIndex!='1'"
              src="../../assets/2.png"
            >
            <img
              v-show="showIndex=='1'"
              src="../../assets/2-disable.png"
            >
          </div>
          <div>
            <div
              v-show="showIndex=='1'"
              class="loaded-bar"
            />

            <div
              v-show="showIndex=='2'"
              class="ing-bar"
            >
              <div class="color-bar" />
            </div>
            <div
              v-show="showIndex=='3'"
              class="ed-bar"
            />
          </div>
          <div>
            <img
              v-show="showIndex=='3'"
              src="../../assets/3.png"
            >
            <img
              v-show="showIndex!='3'"
              src="../../assets/3-disable.png"
            >
          </div>
        </div>
        <div class="success">
          <img src="../../assets/success.png">
          <span>注册成功</span>
        </div>
        <div class="success-content">
          <div>
            <span class="text">企业名称</span>
            <span class="val">{{ loginInfo.enterpriseName }}</span>
          </div>
          <div>
            <span class="text">企业账户</span>
            <span class="val">{{ loginInfo.companyId }}</span>
          </div>
          <div>
            <span class="text ">姓名</span>
            <span class="val mleft104">{{ loginInfo.name }}</span>
          </div>
          <div class="marginBottom0">
            <span class="text">个人账户</span>
            <span class="val">{{ loginInfo.userId }}</span>
          </div>
        </div>
        <button
          class="login-btn enter-btn"
          @tap="login"
        >
          进入我的企业
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchLogin } from '../../actions/login';

export default {
  name: 'Register',
  components: {
  },
  data() {
    return {
      showIndex: '3',
      loginInfo: {},
      params: {},
    };
  },
  created() {
  },
  mounted() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    window.addEventListener('homeLoaded', () => {
      plus.webview.currentWebview().hide('slide-out-right');
    });
  },
  methods: {
    handleImmer() {
      if (!window.plus) return '40px';
      let statusBarHeight = plus.navigator.isImmersedStatusbar() ? Math.round(plus.navigator.getStatusbarHeight()) : 0;
      if (statusBarHeight < 40) {
        statusBarHeight = 40;
      }
      return `${statusBarHeight}px`;
    },
    async login() {
      const params = {
        j_username: this.loginInfo.phone,
        j_password: this.loginInfo.pwd,
        j_dept: this.loginInfo.deptId,
        clientType: 'MT',
      };
      JE.setLSItem('authorization');
      const res = await fetchLogin(params);
      if (res.success) {
        JE.setLSItem('authorization', res.obj);
        // mui.toast('登录成功');
        plus.webview.getLaunchWebview()
          .evalJS('APP.start.openHome()');
        // mui.back();
        // location.href='news.html'
      } else {
        // this.showModalFlag = false;
        mui.toast('登录失败');
      }
    },
    setLoginInfo() {
      this.loginInfo = {
        name: this.params.name,
        enterpriseName: this.params.enterpriseName,
        companyId: this.params.companyId,
        userId: this.params.userId,
        deptId: this.params.deptId,
        pwd: this.params.pwd,
        phone: this.params.phone,
      };
    },
  },
};
</script>
